<template>
  <Modal
    v-model="modal"
    :title="editTitle"
    @on-cancel="canceledit"
    :footer-hide="see"
    width="800"
  >
    <Select
      :disabled="see || editTitle === '编辑'"
      v-model="params.project_id"
      v-width="200"
      placeholder="请选择项目"
      @on-change="askData"
      class="ivu-mb-8"
    >
      <Option
        v-for="item in projectList"
        :value="item.project_id"
        :key="item.project_id"
        >{{ item.name }}</Option
      >
    </Select>
    <div v-width="740">
      <Row type="flex" justify="space-between">
        <Col v-width="205"><p>渠道</p></Col>
        <Col v-width="80"><p>预算</p></Col>
        <Col v-width="80"><p>总到诊</p></Col>
        <Col v-width="80"><p>五星对话</p></Col>
        <Col v-width="80"><p>有效对话</p></Col>
        <Col v-width="80"><p>五星留电</p></Col>
        <Col v-width="80"><p>白癜风到诊</p></Col>
      </Row>
    </div>
    <div class="ivu-mt-8 bodybox">
      <div class="loding" v-if="data.length==0">
        <div class="ivu-spin ivu-spin-large ivu-spin-fix">
          <div class="ivu-spin-main">
            <span class="ivu-spin-dot"></span> 
            <div class="ivu-spin-text"></div>
          </div>
        </div>
      </div>
      <template v-for="(item, index) in data">
        <Row type="flex" justify="space-between" class="ivu-mt-8" :key="index">
          <Col v-width="205"
            ><p class="ellipsis" :title="item.channelName">
              {{ item.channelName }}
            </p></Col
          >
          <Col v-width="80"
            ><InputNumber
              :disabled="see"
              :min="0"
              v-model="item.plan_consume"
              :formatter="(value) => `¥${value}`"
              :parser="(value) => value.replace('¥', '')"
            ></InputNumber
          ></Col>
          <Col v-width="80"
            ><InputNumber
              :disabled="see"
              :min="1"
              v-model="item.arrived_num"
              :formatter="inputday"
            ></InputNumber
          ></Col>
          <Col v-width="80"
            ><InputNumber
              :disabled="see"
              :min="1"
              v-model="item.qz_dialogue_num"
              :formatter="inputday"
            ></InputNumber
          ></Col>
          <Col v-width="80"
            ><InputNumber
              :disabled="see"
              :min="1"
              v-model="item.dialogue_num"
              :formatter="inputday"
            ></InputNumber
          ></Col>
          <Col v-width="80"
            ><InputNumber
              :disabled="see"
              :min="1"
              v-model="item.ld_num"
              :formatter="inputday"
            ></InputNumber
          ></Col>
          <Col v-width="80"
            ><InputNumber
              :disabled="see"
              :min="1"
              v-model="item.bdf_arrived_num"
              :formatter="inputday"
            ></InputNumber
          ></Col>
        </Row>
      </template>
    </div>
    <div slot="footer">
      <Button @click="canceledit">取消</Button>
      <Button @click="submitedit" type="primary">确认</Button>
    </div>
  </Modal>
</template>

<script>
import { netplanplaninfo, netplaneditinfo, netplanaddplan } from "@/api/hqapi";
export default {
  name: "Edit",
  props: {
    projectList: {
      type: [Array],
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      value1: 12,
      modal: false,
      editTitle: "",
      see: false,
      data: [],
      id: "",
      params: { project_id: "", net_config_id: "", month_time: "", id: "" },
      text: "",
      editTitles: 1,
    };
  },
  methods: {
    initial(row, projectId, monthTime, bool) {
      this.params.month_time = this.$Date(monthTime).format("YYYY-MM");
      this.text = this.$Date(monthTime).format("MM");
      this.see = false;
      if (row) {
        this.params.project_id = row.project_id ? row.project_id : "";
        this.params.net_config_id = row.net_config_id ? row.net_config_id : "";
        this.params.id = row.id ? row.id : "";
        if (bool) {
          this.editTitle = `查看${this.text}月份计划`;
          this.editTitles = 1;
          this.see = true;
        } else {
          this.editTitle = `编辑${this.text}月份计划`;
          this.editTitles = 2;
        }
      } else {
        this.params.project_id = projectId || "";
        this.editTitle = `新增${this.text}月份计划`;
        this.editTitles = 3;
      }
      this.askData();
      this.modal = true;
    },
    askData() {
      this.data = [];
      if (this.params.project_id && this.params.project_id !== "") {
        if (this.editTitles === 1) {
          this.askDataSee();
        } else if (this.editTitles === 2) {
          this.askDataEdit();
        } else if (this.editTitles === 3) {
          this.askDataSee();
        }
      }
    },
    askDataSee() {
      netplanplaninfo(this.params).then((res) => {
        this.data = res;
      });
    },
    askDataEdit() {
      netplaneditinfo(this.params).then((res) => {
        this.data = res;
      });
    },
    canceledit() {
      this.modal = false;
    },
    submitedit() {
      let datas = [];
      this.data.forEach((item) => {
        let params = {
          channelName: item.channelName,
          channel_id: item.channel_id,
          subdivided_channels_id: item.subdivided_channels_id,
          arrived_num:
            !item.arrived_num &&
            typeof item.arrived_num !== "undefined" &&
            item.arrived_num != 0
              ? ""
              : item.arrived_num,
          dialogue_num:
            !item.dialogue_num &&
            typeof item.dialogue_num !== "undefined" &&
            item.dialogue_num != 0
              ? ""
              : item.dialogue_num,
          plan_consume:
            !item.plan_consume &&
            typeof item.plan_consume !== "undefined" &&
            item.plan_consume != 0
              ? ""
              : item.plan_consume,
          qz_dialogue_num:
            !item.qz_dialogue_num &&
            typeof item.qz_dialogue_num !== "undefined" &&
            item.qz_dialogue_num != 0
              ? ""
              : item.qz_dialogue_num,
          ld_num:
            !item.ld_num &&
            typeof item.ld_num !== "undefined" &&
            item.ld_num != 0
              ? ""
              : item.ld_num,
          bdf_arrived_num:
            !item.bdf_arrived_num &&
            typeof item.bdf_arrived_num !== "undefined" &&
            item.bdf_arrived_num != 0
              ? ""
              : item.bdf_arrived_num,
        };
        datas.push(params);
      });
      let params = {
        month_time: this.params.month_time,
        project_id: this.params.project_id,
        id: this.params.id,
        info: JSON.stringify(datas),
      };
      netplanaddplan(params).then((res) => {
        this.$Message.success(`${this.editTitle}成功`);
        this.$emit("askData");
        this.modal = false;
      });
    },
    inputday(num) {
      return parseInt(num);
    },
  },
};
</script>

<style lang="less" scoped>
.ellipsis {
  color: #000;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bodybox {
  height: 380px;
  overflow-y: auto;
  padding-right: 10px;
}
</style>
